<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 
            div =>    标签名/标记/元素(二阶段)
            class="" id="" title=""  => 属性(标签的html属性 => 写在标签内和标签名一个空格分隔的叫做属性, 属性可以没有, 也可以有多个,多个属性之间用空格分隔)
            123123   => 文本  
                        注释
        -->
        <div class="one two" id="box" title="hello" data-id="0">
            <span>
                123123
            </span>
            <!-- 123123 -->
        </div>
    </body>
<script>
    // JS  DOM(Document Object Model)  文档对象模型
    // 1.  html页面载入到浏览器中 就会变成文档的一部分
    // 2.  通过文档(document)  => 可以访问页面中所有元素  (元素获取)
    // 3.  也可以通过文档获取/操作页面上的元素  (修改元素的内容 innerHTML innerText value ,操作class名 className classList  操作样式:style  绑定事件: onclick   元素的增删 改 查)

    // console.log(document);

    // 对应id名 class名 tag名  name属性
    // document.getElementById()    => 返回元素 | null
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // 按css选择器获取元素
    // document.querySelector()
    // document.querySelectorAll()

    // var res = document.getElementById("box");
    // console.log(res);


    // 节点 => JS中提出的 (W3C => 页面中的所有内容都是有节点组成的)
    // 文档  => 文档节点
    // 元素/标签  => 元素节点
    // 属性节点  html属性
    // 文本  => 文本节点
    // 注释  => 注释节点

    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点 


    // 获取文档节点
    // document


    // 获取元素节点  => html元素
    // document.getElementById()    => 返回元素 | null
    // document.getElementsByClassName()
    // document.getElementsByTagName()
    // document.getElementsByName()

    // document.querySelector()
    // document.querySelectorAll()

    // 获取和操作属性节点  => 操作html属性 (标签内的html属性 -> 只要是标签内的 都可以归html属性操作  官方/自定义属性)
    // 1. 属性节点 存在于 元素节点上  => 获取属性节点要依赖于元素节点  
    // 2. html中的属性 也可以增 删 改 查

    var box = document.getElementById("box");
    console.log(box, typeof box);

    // getAttribute(key) => value    获取html属性  => 对应属性名获取属性值,找不到就返回null
    console.log(box.getAttribute("id"));
    console.log(box.getAttribute("data-id"));
 
    // setAttribute(key,value)     => 设置/修改 html属性 (对应属性名设置属性值 有就更新 没有就新增)  ,返回值 undefined
    box.setAttribute("id","BOX");
    box.setAttribute("class","ONE TWO");

    // removeAttribute(key)        => 删除html属性 (对应属性名(键名)删除html属性)
    console.log(box.removeAttribute("id"));
    console.log(box.removeAttribute("class"));
    console.log(box.removeAttribute("title"));
    console.log(box.removeAttribute("data-id"));


    // 元素节点   => html元素


</script>
</html>